<template>
    <div class="subfieldsr">
      <span class="ops"><a href="" target="_blank">更多>></a></span>
      <span class="opss"><a href="" target="_blank">更多>></a></span>
      <el-tabs class="eltabs" v-model="activeName" ref="a" @tab-click="handleClick" >
              <el-tab-pane label="党建文化"  name="first">
                  <ul>
                      <li>
                          <span>09-93</span>
                          <a href="" target="_blank">加工所离退休党支部完成调整工作</a>
                      </li>
                      <li>
                          <span>09-93</span>
                          <a href="" target="_blank">强根固基开新局——加工所举办2023年度第一期党务干部培训班</a>
                      </li>
                      <li>
                          <span>09-93</span>
                          <a href="" target="_blank">加工所与上海西贝惟达食品科技有限公司签署合作协议</a>
                      </li>
                      <li>
                          <span>09-93</span>
                          <a href="" target="_blank">加工所与上海西贝惟达食品科技有限公司签署合作协议</a>
                      </li>
                      <li>
                        <span>09-93</span>
                        <a href="" target="_blank">加工所与上海西贝惟达食品科技有限公司签署合作协议</a>
                    </li>
                  </ul>
              </el-tab-pane>
        </el-tabs>
        <div class="sub_right">
          <el-tabs class="eltabss"  v-model="activeNames" ref="a" @tab-click="handleClick" >
              <el-tab-pane label="科研平台"  name="first" >
                  <div class="t_101">
                      <span>
                          <a href="" target="_blank">农业农村部农产品加工综合性重点实验室</a>
                      </span>
                </div>
                <div class="t_102">
                    <span>
                        <a href="" target="_blank"> 农业农村部农产品及加工品质量监督检验测试中心（北京）</a>
                    </span>
              </div>
              <div class="t_103">
                <span>
                    <a href="" target="_blank">全国名特优新农产品营养品质评价鉴定机构</a>
                </span>
          </div>
          <div class="t_104">
            <span>
                <a href="" target="_blank">农业农村部农产品加工标准化技术委员会</a>
            </span>
      </div>
              </el-tab-pane>        
        </el-tabs>
        </div>
    </div>
    </template>
    <script>
      export default {
        data() {
          return {
            activeName: 'first',
            activeNames: 'first'
          };
        },
        methods: {
          handleClick(tab, event) {
            console.log(tab, event);
          },
          handleClicks(tab, event) {
            console.log(tab, event);
          },
        },
      //   mounted(){
      //     this.$nextTick(()=>{this.$refs.a.$refs.nav.$nextTick(()=>{
      //         var target=document.getElementsByClassName("el-tabs_item is-top");
      //         console.log(target);
      //         let that=this;
      //         for(let i=0;i<target.length;i++){
      //             target[i].addEventListener("mouseover",()=>{
      //                 that.$refs.a.handleTabClick(1,String(i))
      //             })
      //         }
      //     })})
      //   }
      };
    </script>
    <style scoped>
    .t_101{
        background: url(../image/n1.png) no-repeat left center;
    }
    .t_102{
        background: url(../image/n2.png) no-repeat left center;
    }
    .t_103{
        background: url(../image/n3.png) no-repeat left center;
    }
    .t_104{
        background: url(../image/n4.png) no-repeat left center;
    }
    .t_101 span{
        display: block;
        line-height: 34px;
        transition: all 0.3s ease;
        overflow: hidden;
        background-repeat: no-repeat;
        background-position: left center;
      }
      .t_102 span{
        display: block;
        line-height: 34px;
        margin-top: 12px;
        transition: all 0.3s ease;
        overflow: hidden;
        background-repeat: no-repeat;
        background-position: left center;
      }
      .t_103 span{
        display: block;
        line-height: 34px;
        margin-top: 12px;
        transition: all 0.3s ease;
        overflow: hidden;
        background-repeat: no-repeat;
        background-position: left center;
      }
      .t_104 span{
        display: block;
        line-height: 34px;
        margin-top: 12px;
        transition: all 0.3s ease;
        overflow: hidden;
        background-repeat: no-repeat;
        background-position: left center;
      }
      .t_101 span a{
        padding-left: 50px;
        display: block;
        height: 37px;
        color:#000;
      text-decoration: none;
      list-style: none;
      } 
      .t_102 span a{
        padding-left: 50px;
        display: block;
        height: 37px;
        color:#000;
      text-decoration: none;
      list-style: none;
      } 
      .t_103 span a{
        padding-left: 50px;
        display: block;
        height: 37px;
        color:#000;
      text-decoration: none;
      list-style: none;
      } 
      .t_104 span a{
        padding-left: 50px;
        display: block;
        height: 37px;
        color:#000;
      text-decoration: none;
      list-style: none;
      } 
    .eltabs li{
      list-style: none;
      float: left;
      width: 100%;
      height: 38px;
      line-height: 36px;
      overflow: hidden;
      background: url(../image/sanjiao.png) no-repeat left 13px;
    }
    .eltabs li span{
      float: right;
      margin-left: 10px;
  }
      .eltabs li a{
          color: #000;
          list-style: none;
          text-decoration: none;
          display: block;
          padding-left: 18px;
      }
    .subfieldsr .ops{
      position: absolute;
      right: 10px;
      top: 10px;
      z-index: 999;
    }
    .subfieldsr .opss{
      position: absolute;
      left: 363px;
      top: 10px;
      z-index: 999;
    }
    .subfieldsr .ops a{
      color: #000;
      list-style: none;
      text-decoration: none;
    }
    .subfieldsr .opss a{
      color: #000;
      list-style: none;
      text-decoration: none;
    }
    .eltabss ul{
      list-style: none;
    }
    .eltabss ul li{
      height: 52px;
      margin: 0px 0 14px;
      width: 100%;
      overflow: hidden;
    }
    .eltabss ul li .datas i {
      display: block;
      font-size: 14px;
      padding-top: 3px;
      height: 20px;
      text-align: center;
      font-style: normal;
      color:#fff;
    }
    .eltabss ul li .datas strong {
      display: block;
      font-size: 18px;
      padding-bottom: 2px;
      height: 32px;
      color: #fff;
      text-align: center;
      font-weight: normal;
      line-height: 32px;
  }
   /deep/ .el-tabs__item {
      font-weight: bold; /*设置标签文本加粗*/
      font-size: 20px;
    }
    /deep/ .el-tabs__item:hover {
      font-weight: bold; /*设置标签文本加粗*/
      font-size: 20px;
      color:  #000;
    }
    /deep/.el-tabs__item.is-active{
      color:  #000;
    }
    /deep/.el-tabs__active-bar{
      background:#069564 ;
    }
    .subfieldsr{
      position: relative;
      width: 1200px;
      margin: 0 auto;
      overflow: hidden;
    }
    .eltabs{
      width: 62%;
      height: 270px;
      float: right;
    }
    .sub_right{
      width: 415px;
      float: left;
      height: 270px;
    }
  </style>